import { Text, View, StyleSheet, Pressable } from "react-native"
import { AnimatePresence, MotiView } from "moti"
import React from "react"
import { Image } from "expo-image"
import { scale } from "react-native-size-matters"

export default function LogoutMenu({
  expanded,
  onButtonPress,
}: {
  expanded: boolean
  onButtonPress: () => void
}) {
  return (
    <AnimatePresence>
      {expanded && (
        <View
          style={{
            position: "absolute",
            right: 24,
            top: 56,
            zIndex: 9999,
          }}
        >
          <ActionButton onButtonPress={onButtonPress} />
        </View>
      )}
    </AnimatePresence>
  )
}

function ActionButton({ onButtonPress }: { onButtonPress: () => void }) {
  return (
    <MotiView
      transition={{ delay: 250, damping: 15, mass: 1 }}
      from={{
        opacity: 0,
        translateY:scale(-20)
      }}
      animate={{
        opacity: 1,
        translateY:scale(-40),
        translateX:scale(-25)
      }}
      exit={{
        opacity: 0,
        translateY:scale(-20),
      }}
    >
      <Pressable onPress={onButtonPress} style={styles.button}>
        <View style={{ padding: scale(10), flexDirection: "row", alignItems: "center", width:scale(120) }}>
          <Image
            source={require("../../assets/images/ethera_logo.png")}
            contentFit="contain"
            style={{ height: 24, width: 24 }}
          />
          <View style={{ paddingLeft: 10 }}>
            <Text
              style={{
                fontSize: scale(16),
                color: "#FF9405",
                fontFamily: "700",
              }}
            >
              Logout
            </Text>
          </View>
        </View>
      </Pressable>
    </MotiView>
  )
}

const styles = StyleSheet.create({
  button: {
    borderWidth: 1,
    borderColor: "#CCCCCC",
    borderRadius: 8,
    backgroundColor: "white",
  },
})
